<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>学期管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <script src="layui-v2.5.4/layui.js"></script>
    <link rel="stylesheet" href="layui-v2.5.4/css/layui.css">
</head>
<body>

<div class="layui-row" style="padding: 15px;">

    <div id="searchDiv">
        <label>学期名称：</label>
        <div class="layui-inline">
            <input class="layui-input" name="userName" id="userName" autocomplete="off" placeholder="模糊搜索">
        </div>
        <button class="layui-btn" id="searchBtn" style="margin-left: 10px;">搜索</button>
        <button class="layui-btn layui-btn-normal" id="resetBtn">重置</button>
    </div>

    <table id="semesterList" lay-filter="ccTb"></table>

</div>


<script type="text/html" id="tb_top">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>

<script type="text/html" id="tb_cell">
    <a class="layui-btn layui-btn-sm" lay-event="edit" title="编辑">编辑</a>
</script>


<script>
    layui.use(['table','jquery','form'], function() {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;

        table.render({
            elem: '#semesterList'
            ,height: 'full-80'
            ,page: true
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,limit: 15
            //,url: 'toSemesterList.do'
            ,toolbar: '#tb_top'
            ,cols: [[
                {type:'numbers'}
                ,{type:'checkbox'}
                ,{field: 'id', title: '学期ID'}
                ,{field: 'semesterName', title: '学期名称'}
                ,{field: 'code', title: '学期编码',align:'center'}
                ,{field: 'addTime', title: '添加时间', sort: true,align:'center'}
                ,{field: 'dataSort', title: '排序', sort: true,align:'center'}
                ,{fixed: 'right', title: '操作', align:'center', toolbar: '#tb_cell'}
            ]]
            ,data: [{
            "id": "10001"
            ,"semesterName": "2019-2020学年第一学期"
            ,"code": "111"
            ,"addTime": "2019-9-1 10:00:00"
            ,"dataSort":1
            }
            ,{
            "id": "10002"
            ,"semesterName": "2019-2020学年第二学期"
            ,"code": "112"
            ,"addTime": "2019-9-1 10:01:00"
            ,"dataSort":2
                }
            ,{
            "id": "10003"
            ,"semesterName": "2019-2020学年第三学期"
            ,"code": "113"
            ,"addTime": "2019-9-1 10:02:00"
            ,"dataSort":3
                }
            ]
        });



//监听表格头部工具栏事件
        table.on('toolbar(ccTb)', function(obj){
            switch(obj.event){
                case 'add':
                    layer.open({
                        type:2,
                        title:'添加信息',
                        area: ['550px','300px'],
                        fix: false,
                        maxmin: true,
                        shadeClose: true,
                        shade:0.4,
                        content:'toSemesterEdit.htm'
                    });
                    break;
            };
        });

        //监听表格行工具按钮事件
        table.on('tool(ccTb)', function(obj){
            switch(obj.event){
                case 'edit':
                    layer.open({
                        type:2,
                        title:'编辑信息',
                        area: ['550px','300px'],
                        fix: false,
                        maxmin: true,
                        shadeClose: true,
                        shade:0.4,
                        content:'toSemesterEdit.htm?&id='+obj.data.id
                    });
                    break;
            };
        });

        //搜索表格
        $('#searchBtn').on('click', function(){
            var userName = $("#userName").val();
            //重载右侧表格
            table.reload('semesterList', {
                where: {
                    'queryParameter.userName_li': userName
                }
            });
        });

        //重置表格
        $('#resetBtn').on('click', function(){
            $("#userName").val("");
            //重载右侧表格
            table.reload('semesterList', {
                where: {
                    'queryParameter.userName_li': ''
                }
            });
        });

    });
</script>
</body>
</html>

